<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let bus = {
        fn: null,
        emit(data) {
            this.fn(data)
        },
        on(callback) {
            // this.list.push(callback);
            this.fn = callback;
        }
    }
    class Father extends React.Component {

        render() {
            return (
                <div className='app'>
                    <Son1 />
                    <Son2 />
                </div>
            );
        }
    }

    class Son1 extends React.Component {
        state = {
            author: '',
            msg: '',
        }
        submit = () => {
            bus.emit({ author: this.state.author, msg: this.state.msg })
        }
        render() {
            let { author, msg } = this.props
            return (
                <div className='app'>
                    评论人：<input value={author} onChange={e => this.setState({ author: e.target.value })} type="text" /><br />
                    评论内容：<textarea value={msg} onChange={e => this.setState({ msg: e.target.value })} cols="30" rows="10"></textarea>
                    <button onClick={this.submit}>发表</button>
                </div>
            );
        }
    }
    class Son2 extends React.Component {
        state = {
            data: []
        }
        constructor() {
            super()
            bus.on((data) => {

                this.state.data.push(data)
                this.setState({ data: this.state.data });
            })
        }
        del = (index) => {
            this.state.data.splice(index, 1)
            this.setState({ data: this.state.data })
        }
        render() {
            return (
                <div className='app'>
                    <h1>留言板</h1>
                    {
                        this.state.data.map((item, index) => {
                            return <div key={index}><div>作者:{item.author}</div><div>内容:{item.msg}</div><button onClick={() => this.del(index)}>删除</button></div>
                        })
                    }
                </div>
            );
        }
    }
    ReactDOM.render(<Father />, document.getElementById('root'))

</script>

</html>